<!--
 * @Author: dfh
 * @Date: 2023-12-14 15:02:51
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
<template>
  <cw-form ref="formRef" :model="userInfo" :rules="{
    username: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
    password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }]
  }">
    <cw-form-item label="用户名称" prop="username" :rules="[
      { min: 6, max: 10, message: '用户名6~10位', trigger: ['change', 'blur'] }
    ]">
      <cw-input v-model="userInfo.username" />
    </cw-form-item>
    <cw-form-item label="用户密码" prop="password">
      <cw-input v-model="userInfo.username" />
    </cw-form-item>
    <cw-button @click="handleClick(formRef)">提交</cw-button>
  </cw-form>
</template>

<script setup lang="ts">
import { FormInstance } from '@cowain/components/form';
import { Values } from 'async-validator';
import { ref } from 'vue';
const formRef = ref<FormInstance>();
const userInfo = ref({
  username: '',
  password: ''
});
const handleClick = (form: FormInstance | undefined) => {
  if (!form) return;
  form.validate((valid: boolean, fields?: Values)=>{
    console.log(valid,fields)
  })
}
</script>

<style lang="scss" scoped></style>